"use client";
/*
 * @Author: hongbin
 * @Date: 2025-04-26 10:59:54
 * @LastEditors: hongbin
 * @LastEditTime: 2025-04-26 17:45:24
 * @Description:
 */
import { useContext, useState } from "react";
import { Box, Button, Card, Container, Flex, Heading, Text, TextField } from "@radix-ui/themes";
import { useRouter } from "next/navigation";
import { GlobalStateContext } from "@/lib/context";

export default function LoginPage() {
    const { setUserInfo } = useContext(GlobalStateContext);

    const router = useRouter();

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [loading, setLoading] = useState(false);

    const [error, setError] = useState("");

    const Login = (): Promise<{ email?: string; error?: string }> => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (email === "2218176087@qq.com" && password === "123456") {
                    resolve({ email });
                } else {
                    reject({ error: "邮箱或密码错误" });
                }
            }, 1500);
        });
    };

    const handleLogin = async () => {
        setLoading(true);
        setError("");

        Login()
            .then(res => {
                console.log("res", res);

                if (res.email && setUserInfo) {
                    setUserInfo({ userName: res.email });
                }

                router.push("/");
            })
            .catch(err => {
                console.log("err", err);
                setError(err.error || "登陆失败");
            })
            .finally(() => {
                setLoading(false);
            });
    };

    const clearErrorOnInput = () => {
        if (error) setError("");
    };

    return (
        <Container
            size='2'
            height='100vh'>
            <Flex
                direction='column'
                justify='center'
                align='center'
                height='100%'>
                <Box
                    width='100%'
                    maxWidth='400px'
                    p='4'>
                    <Card
                        style={{
                            boxShadow: "var(--shadow-3)",
                        }}
                        variant={"ghost"}>
                        <Heading
                            size='6'
                            align='center'
                            mb='4'>
                            登录
                        </Heading>

                        <Box mb='3'>
                            <Text
                                mb='1'
                                as='label'
                                size='2'>
                                邮箱
                            </Text>
                            <TextField.Root
                                type='email'
                                placeholder='请输入邮箱'
                                value={email}
                                onChange={e => {
                                    setEmail(e.target.value);
                                    clearErrorOnInput();
                                }}
                                color={error ? "red" : undefined}
                            />
                        </Box>

                        <Box mb='4'>
                            <Text
                                mb='1'
                                as='label'
                                size='2'>
                                密码
                            </Text>
                            <TextField.Root
                                type='password'
                                placeholder='请输入密码'
                                value={password}
                                onChange={e => {
                                    setPassword(e.target.value);
                                    clearErrorOnInput();
                                }}
                                color={error ? "red" : undefined}
                            />
                        </Box>

                        <Text
                            size='1'
                            color='red'
                            style={{
                                opacity: error ? 1 : 0,
                                transition: "opacity 0.2s ease-in-out",
                            }}>
                            {error}&nbsp;
                        </Text>
                        <Flex
                            gap='3'
                            justify='center'>
                            <Button
                                onClick={handleLogin}
                                disabled={loading}>
                                {loading ? "登录中..." : "登录"}
                            </Button>
                            <Button
                                variant='soft'
                                onClick={() => router.push("/register")}
                                disabled={loading}>
                                注册
                            </Button>
                        </Flex>
                    </Card>
                </Box>
            </Flex>
        </Container>
    );
}
